<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta content="yes" name="apple-touch-fullscreen"/>
    <meta content="telephone=no,email=no" name="format-detection"/>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet/less" type="text/css" href="less/index.less">
    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.0.2/less.min.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="nav">
            <span class="nav-all">全部</span>
            <span class="has-icon nav-bar active">进度</span>
            <span class="has-icon nav-num">总需人数</span>
            <span class="nav-unveiled">即将揭晓</span>
        </div>
        <div class="item-wrap">
            <!--             <div class="item">
                            <div class="item-img">
                                <img src="img/actpic1.jpg" alt="">
                                <span class="state">进行中</span>
                            </div>
                            <div class="item-con">
                                <div class="item-title">
                                    <p>潮生活赢iPhone活动第二期</p>
                                    <span>第二轮</span>
                                </div>
                                <div class="item-bar">
                                    <span class="bar-con"></span>
                                    <span class="bar-percent">20%</span>
                                </div>
                                <div class="item-num">
                                    <span class="all">总需人次2565652</span>
                                    <span class="join">652参与<>
                                </div>
                                <div class="item-btn">
                                    <button>立即参加</button>
                                </div>
                            </div>
                        </div>
            <!--            <div class="item">
                            <div class="item-img">
                                <img src="img/actpic1.jpg" alt="">
                                <span class="state">进行中</span>
                            </div>
                            <div class="item-con">
                                <div class="item-title">
                                    <p>潮生活赢iPhone活动第二期</p>
                                    <span>第二轮</span>
                                </div>
                                <div class="item-bar">
                                    <span class="bar-con"></span>
                                    <span class="bar-percent">20%</span>
                                </div>
                                <div class="item-num">
                                    <span class="all">总需人次2565652</span>
                                    <span class="join">652参与</span>
                                </div>
                                <div class="item-btn">
                                    <button>立即参加</button>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="item-img">
                                <img src="img/actpic1.jpg" alt="">
                                <span class="state">进行中</span>
                            </div>
                            <div class="item-con">
                                <div class="item-title">
                                    <p>潮生活赢iPhone活动第二期</p>
                                    <span>第二轮</span>
                                </div>
                                <div class="item-bar">
                                    <span class="bar-con"></span>
                                    <span class="bar-percent">20%</span>
                                </div>
                                <div class="item-num">
                                    <span class="all">总需人次2565652</span>
                                    <span class="join">652参与</span>
                                </div>
                                <div class="item-btn">
                                    <button>立即参加</button>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="item-img">
                                <img src="img/actpic1.jpg" alt="">
                                <span class="state">进行中</span>
                            </div>
                            <div class="item-con">
                                <div class="item-title">
                                    <p>潮生活赢iPhone活动第二期</p>
                                    <span>第二轮</span>
                                </div>
                                <div class="item-bar">
                                    <span class="bar-con"></span>
                                    <span class="bar-percent">20%</span>
                                </div>
                                <div class="item-num">
                                    <span class="all">总需人次2565652</span>
                                    <span class="join">652参与</span>
                                </div>
                                <div class="item-btn">
                                    <button>立即参加</button>
                                </div>
                            </div>
                        </div>-->
        </div>
    </div>
    <script>
        /*先清除缓存*/
        sessionStorage.clear()
        /*创建新元素*/
        let newDom = params => {
            let dom = document.createElement(params.domName)
            if ( params.valList ) {
                params.attrList.map((item,index) => {
                    dom[params.method](item,params.valList[index])
                })
            } else {
                dom[params.method] = params.attrList
            }
            return dom
        }

        /*数据请求*/
        const requestApi =  param => {
            return new Promise((resovle, reject) => {
                $.ajax({
                    'type' : param.type || 'get',
                    'async' : param.async || true,
                    'url' : param.url,
                    'data' : param.data || '',
                    'success' : res => {
                        resovle(res)
                    },
                    'error' : err => {
                        reject(err)
                    }
                })
            })
        }
        /*阿拉伯数字转化为中文*/
        let sectionToChinese = (section) => {
            let chnNumChar = ["零","一","二","三","四","五","六","七","八","九"]
            let chnUnitChar = ["","十","百","千"]
            let strIns = ''
            let chnStr = ''
            let unitPos = 0
            let zero = true
            while(section > 0){
                var v = section % 10;
                if(v === 0){
                    if(!zero){
                        zero = true;
                        chnStr = chnNumChar[v] + chnStr;
                    }
                }else{
                    zero = false;
                    strIns = chnNumChar[v];
                    strIns += chnUnitChar[unitPos];
                    chnStr = strIns + chnStr;
                }
                unitPos++;
                section = Math.floor(section / 10);
            }
            return chnStr === '一十' ? '十' : chnStr;
        }

        /*创建元素的对象*/
        let createItems = data => {
            data.activityList.forEach((currentVal,index,arrObj) => {
                let item = newDom({'domName':'div','method':'setAttribute','attrList':['class'],'valList':['item']})
                let itemImg = newDom({'domName':'div','method':'setAttribute','attrList':['class'],'valList':['item-img']})
                let itemCon = newDom({'domName':'div','method':'setAttribute','attrList':['class'],'valList':['item-con']})
                let img = newDom({'domName':'img','method':'setAttribute','attrList':['src','alt'],'valList':[currentVal.actPic,'']})
                let state = newDom({'domName':'span','method':'setAttribute','attrList':['class'],'valList':['state']})
                let itemTitle = newDom({'domName':'div','method':'setAttribute','attrList':['class'],'valList':['item-title']})
                let itemBar = newDom({'domName':'div','method':'setAttribute','attrList':['class'],'valList':['item-bar']})
                let itemNum= newDom({'domName':'div','method':'setAttribute','attrList':['class'],'valList':['item-num']})
                let itemBtn = newDom({'domName':'div','method':'setAttribute','attrList':['class'],'valList':['item-btn']})
                let title = newDom({'domName':'p','method':'innerText','attrList':[currentVal.actName]})
                let des = newDom({'domName':'span','method':'innerText','attrList':[`第${sectionToChinese(currentVal.schedule)}轮`]})
                let barCon = newDom({'domName':'span','method':'setAttribute','attrList':['class'],'valList':['bar-con']})
                let barConI = newDom({'domName':'span','method':'setAttribute','attrList':['class'],'valList':['bar-con-i']})
                let barPercentNum = Math.round(currentVal.issuedCnt/currentVal.requiredCnt * 10000)
                barConI.style.width = `${barPercentNum/100}%`
                let barPercent = newDom({'domName':'span','method':'setAttribute','attrList':['class'],'valList':['bar-percent']})
                barPercent.innerText = `${barPercentNum/100}%`
                let numAll = newDom({'domName':'span','method':'setAttribute','attrList':['class'],'valList':['all']})
                numAll.innerText =  `总需人次${currentVal.requiredCnt}`
                let numJoin = newDom({'domName':'span','method':'setAttribute','attrList':['class'],'valList':['join']})
                let btn = newDom({'domName':'button','method':'setAttribute','attrList':['infoid'],'valList':[currentVal.actId]})
                btn.innerText = '立即参加'
                numJoin.innerText =  `${currentVal.issuedCnt}参与`
                state.innerText =  barPercentNum === 10000 ? '完成' : '进行中'
                let itemWrap = $('.item-wrap')
                barCon.appendChild(barConI)
                itemBtn.appendChild(btn)
                itemNum.appendChild(numAll)
                itemNum.appendChild(numJoin)
                itemBar.appendChild(barCon)
                itemBar.appendChild(barPercent)
                itemTitle.appendChild(title)
                itemTitle.appendChild(des)
                itemCon.appendChild(itemTitle)
                itemCon.appendChild(itemBar)
                itemCon.appendChild(itemNum)
                itemCon.appendChild(itemBtn)
                itemImg.appendChild(img)
                itemImg.appendChild(state)
                item.appendChild(itemImg)
                item.appendChild(itemCon)
                itemWrap.append(item)
            })
        }
        /*默认先展示进度模块下的数据*/
       /* let currentPage = 1
        let totalPage = 10*/
        let getDataInfo = params => {
            requestApi({
                'url' : 'data.json',
                'type' : 'post',
                'data' : {'type':params.type,'page':params.page}
            }).then( res => {
                createItems(res.info)
                /*currentPage = res.info.page.page
                totalPage = totalPage !== res.info.page.totalPage && res.info.page.totalPage*/
                let currentPage = JSON.parse(sessionStorage.getItem("currentPage")) * 1 ? JSON.parse(sessionStorage.getItem("currentPage")) * 1 : JSON.stringify(res.info.page.page)
                sessionStorage.setItem("currentPage", currentPage)
                sessionStorage.setItem("totalPage", JSON.stringify(res.info.page.totalPage))
                sessionStorage.setItem("type", JSON.stringify(params.type))
            }).catch( err => {
                console.log("第一个请求失败")
            })
        }
        getDataInfo({'type':1,'page':1})

        /*点击切换模块数据展示*/
        let navArr = Array.from($('.nav span'))
        navArr.forEach((currentVal,index,arrObj) => {
            currentVal.onclick = function(){
                $(this).addClass('active').siblings().removeClass('active')
                /*数据切换清空在创建新的*/
                $('.item-wrap')[0].innerHTML = ''
                getDataInfo({'type':index,'page':1})
            }
        })
        /*滚动加载*/
        let first = true/*防止第一次的元素增加自动又请求一次接口数据*/
        $(window).scroll(function(){
            let scrollTop = $(this).scrollTop()    //滚动条距离顶部的高度
            let scrollHeight = $(document).height()   //当前页面的总高度
            let clientHeight = $(window).height()    //当前可视的页面高度
            let currentPage = JSON.parse(sessionStorage.getItem("currentPage")) * 1
            let totalPage = JSON.parse(sessionStorage.getItem("totalPage")) * 1
            if( first ) {
                first = false
                return false
            }
            let type = JSON.parse(sessionStorage.getItem("type"))
            const allTrue = scrollTop + clientHeight === scrollHeight && currentPage  < totalPage //距离顶部+当前高度 == 文档总高度 即代表滑动到底部 并且当前页小于总页
            if( allTrue ){
                getDataInfo({'type':type,'page':currentPage + 1})
                sessionStorage.setItem("currentPage", JSON.stringify( currentPage + 1))
            }
        })
        /*点击立即参加进入详情页*/
        $('.item-wrap').on('click',( ev ) => {
            let evObj = ev || event
            let target = evObj.target
            if( target.localName == 'button' ) {
                const INFOID = target.attributes.infoid.value
                location.href = `detail.html?id=${INFOID}`
            }
        })
    </script>
</body>
</html>